<template>
	<view class="">
		<navBar title="室内停车"></navBar>
		<view class="container ">
			<view class="banner">
				<view class="banner-text">
					<view>停车不在难</view>
					<view class="banner-text-2">生活更美好</view>
				</view>
				<image class="banner-img" :src="bg_image.banner"></image>
			</view>
			<view class="content">
				<view class="menu">
					<view class="menu-item" @click="go('/pages/indoor/myCar')">
						<image class="menu-item-img" :src="bg_image.logo1"></image>
						<view>我的车辆</view>
					</view>
					<view class="menu-item" @click="go('/pages/indoor/parkingRecords')">
						<image class="menu-item-img" :src="bg_image.logo2"></image>
						<view>停车记录</view>
					</view>
					<view class="menu-item" @click="beforeBuyMonthCard">
						<image class="menu-item-img" :src="bg_image.logo3"></image>
						<view>停车月卡</view>
					</view>
					<view class="menu-item" @click="go('/pages/indoor/my')">
						<image class="menu-item-img" :src="bg_image.logo4"></image>
						<view>个人中心</view>
					</view>
				</view>
				<!-- 车牌录入 -->
				<view class="car-no-panel" v-if="!plateNumber && !defaultPlateNumberOrder.plateNumber">
					<!-- <licensePlateNumber @success="handleSuccess" title="车牌缴费"></licensePlateNumber> -->
					<component-car :carShow="true" :onlyInput="true" id="cardRef" btnText="车牌缴费" @confire="handleSuccess"></component-car>
				</view>
				<!-- 扫出入口码获取的订单数据 -->
				<view class="car-no-panel" v-if="plateNumber">
					<view class="title" @click="go('/pages/indoor/myCar')">
						<view class="title-left">
							<image class="icon-car" :src="bg_image.iconCar"></image>
							<text class="car-no-title">{{plateNumber || ''}}</text>
							<image class="icon-pen" :src="bg_image.iconPen"></image>
						</view>
						<view class="status" v-show="plateNumber&&Object.keys(order).length">停车中</view>
					</view>
					<view v-if="order.plateNumber">
						<view class="car-info">
							<view class="line">
								<text>车场名称：</text>
								<text class="blue">{{order.parkName || ''}}</text>
							</view>
							<view class="line">
								<text>驶入时间：</text>
								<text>{{order.enterTime || ''}}</text>
							</view>
							<view class="line">
								<text>停车时长：</text>
								<text>{{order.durationStr || ''}}</text>
							</view>
						</view>
						<view class="car-info">
							<view class="line between">
								<text>停车费用</text>
								<text>¥{{order.totalAmount || 0}}</text>
							</view>
							<view class="line between">
								<text>停车优惠券</text>
								<view>
									<text>暂无可用</text>
									<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
								</view>
							</view>
						</view>
						<view class="car-info no-border">
							<view class="line between">
								<text>应付金额</text>
								<text class="pay">¥{{order.actualAmount || 0}}</text>
							</view>
						</view>
						<view class="pay-btn" v-show="Number(order.actualAmount)!==0" @click="handlePay(order)">确认支付</view>
					</view>
					<view v-else class="empty-panel">
						<image class="empty" :src="bg_image.empty"></image>
						<view class="empty-msg">暂无停车信息</view>
					</view>
				</view>
				<!-- 我的默认车牌查询的订单数据 -->
				<view class="car-no-panel" v-if="defaultPlateNumberOrder.plateNumber">
					<view class="title" @click="go('/pages/indoor/myCar')">
						<view class="title-left">
							<image class="icon-car" :src="bg_image.iconCar"></image>
							<text class="car-no-title">{{defaultPlateNumberOrder.plateNumber || ''}}</text>
							<image class="icon-pen" :src="bg_image.iconPen"></image>
						</view>
						<view class="status" v-show="defaultPlateNumberOrder.order">停车中</view>
					</view>
					<view v-if="defaultPlateNumberOrder.order">
						<view class="car-info">
							<view class="line">
								<text>车场名称：</text>
								<text class="blue">{{defaultPlateNumberOrder.order.parkName || ''}}</text>
							</view>
							<view class="line">
								<text>驶入时间：</text>
								<text>{{defaultPlateNumberOrder.order.enterTime || ''}}</text>
							</view>
							<view class="line">
								<text>停车时长：</text>
								<text>{{defaultPlateNumberOrder.order.durationStr || ''}}</text>
							</view>
						</view>
						<view class="car-info">
							<view class="line between">
								<text>停车费用</text>
								<text>¥{{defaultPlateNumberOrder.order.totalAmount || 0}}</text>
							</view>
							<view class="line between" @click="showCoupon">
								<text>停车优惠券</text>
								<view>
									<text>暂无可用</text>
									<u-icon name="arrow-right" color="#B1B1B1"></u-icon>
								</view>
							</view>
						</view>
						<view class="car-info no-border">
							<view class="line between">
								<text>应付金额</text>
								<text class="pay">¥{{defaultPlateNumberOrder.order.actualAmount || 0}}</text>
							</view>
						</view>
						<view class="pay-btn" v-show="Number(defaultPlateNumberOrder.order.actualAmount)!==0" @click="handlePay(defaultPlateNumberOrder.order)">确认支付</view>
					</view>
					<view v-else class="empty-panel">
						<image class="empty" :src="bg_image.empty"></image>
						<view class="empty-msg">暂无停车信息</view>
					</view>
				</view>
				
			</view>
			<u-popup
			:border-radius="22"
			mode="bottom" v-model="showOverlay">
				<view class="popup-coupon">
					<view class="popup-coupon-title">
						<text>可用优惠券（4）</text>
						<u-icon name="close" size="30" @click="closeCoupon"></u-icon>
					</view>
					<view class="popup-coupon-list">
						<view class="popup-coupon-item" v-for="(item,index) in couponList" :key="index">
							<image class="popup-coupon-item-bg" :src="bg_image.couponBgActive"></image>
							<view class="info active">
								<view class="info-left">
									<text>￥</text>
									<text class="ft84">{{item.couponMoney || 0}}</text>
								</view>
								<view class="info-right">
									<view>{{item.useType===1?'停车费抵扣红包':'月卡费用抵扣红包'}}</view>
									<view class="time">有效期至：{{item.endDate || ''}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			
			<!-- 提示弹窗 -->
			<tipsPop :popShow="platPopShow" 
			:contModel="1"
			:btModel="2"
			:popTitle="platPopTitle"
			:popCont="platPopCont" 
			:popbtConfim="platConfimbt"
			:popbtCancel="platCancelbt"
			@confim="platConfim"
			@close="platCancel"></tipsPop>
		</view>
	</view>
</template>

<script>
	import home from './js/home'
	
	import componentCar from './components/ComponentCar/index.vue'
	import tipsPop from '@/components/tipsPop/index.vue';
	export default {
		components: {
		  componentCar,tipsPop
		},
		...home 
	}
</script>

<style lang="less" scoped>
	@import url('./css/home.less');
</style>